<template>
    <div style="background-image: url(http://gips3.baidu.com/it/u=3476243082,1256047914&fm=3028&app=3028&f=JPEG&fmt=auto?w=2048&h=2048); background-repeat: no-repeat; width: 1600px; height: 900px;" >
        <div style="float: left;  border: 1px solid #ccc; width: auto; height: auto; align-self: center;  margin-left: 700px;  margin-top: 300px; text-align: center;">
            <h2>后台管理系统</h2>
            <p>username<el-input v-model="username" style="width: 240px" placeholder="Please input" /></p>
            <p>password<el-input v-model="password" style="width: 240px"  type="password" placeholder="Please input password" show-password/></p>
            <p><el-button type="primary" @click="login">登录</el-button></p>
        </div>
    </div>
</template>
 
<script lang="ts" setup>
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import Register from './Register.vue';
const router=useRouter()
const username = ref('')
const password = ref('')
const login = () => {
    axios.post('http://localhost:8000/htglxt/login/', {
        username: username.value,
        password: password.value
    }).then((res) => {
        if (res.data.code === 200) {
            router.push({ path: '/home', query: { role: res.data.role } })
        } else {
            alert(res.data.msg)
        }
    })
}

onMounted(() => {
    
})
</script>
<style scoped>

</style>